<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜品选择</title>
    <#assign base=request.contextPath/>
    <#setting  number_format="0.##"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <link href="${base}/sweep/css/mui.css" rel="stylesheet"/>
    <link href="${base}/sweep/css/app.css" rel="stylesheet"/>
    <script src="${base}/backstage/layui/layui.js?t=1"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js?t=1"></script>
    <script src="${base}/backstage/js/feng.js?t=1"></script>
    <script src="${base}/backstage/js/loading.js?t=1"></script>
    <script src="${base}/sweep/js/mui.min.js"></script>
    <style>

    </style>
</head>
<body>
<input type="hidden" value="${userId}" id="userId"/>
<input type="hidden" value="${tableNumberId}" id="tableNumberId"/>
<input type="hidden" value="${uId}" id="uId"/>


        <#if a==1>
<div class="mui-content" style="margin-bottom: 130px;">
            <ul class="mui-table-view" >
            <#list commodities as commodities>
                <li class="mui-table-view-cell mui-media" >
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="${commodities.commodityUrl}">
                        <div class="mui-media-body">
                            ${commodities.commodityName}&nbsp;&nbsp;&nbsp;${commodities.weight}
                            <span style="color: red;float: right;font-size: 19px;">￥${commodities.price}</span>
                            <p class='mui-ellipsis' >
                                月销售:${commodities.monthSale}份
                                <button type="button" style="float: right;width: 24%;background-color: #0c9076;color: #ffffff;" value="${commodities.id}" class="primary">添加</button>
                            </p>
                        </div>
                    </a>
                </li>
            </#list>
    </ul>
</div>
        </#if>




    <#if a==2>
        <span style="width: 100px;height: 100px;position: relative;left:40%;top:130px;font-size: 20px">暂无商品</span>
        <img src="${base}/sweep/images/暂无商品.png" style="width: 100px;height: 100px;position: relative;left:13%;top:60px">
    </#if>

<div style="position: fixed;bottom: 0;width: 100%">
    <button type="button" style="display:inline-block;width: 49%;" class="mui-btn mui-btn-primary mui-btn-block" ><span id="cartN">总计：￥<span id="totalpriceshow">0</span></span>元</button>
    <button type="button" style="display:inline-block;width: 49%;" onclick="window.location.href='${base}/admin/QRCode/index.html?tableNumberId='+$('#tableNumberId').val()+'&userId='+$('#userId').val()+'&uId='+$('#uId').val()"  class="mui-btn mui-btn-primary mui-btn-block" >返回</button>
    <button type="button"  onclick="pay()"  class="mui-btn mui-btn-primary mui-btn-block" style="background-color: #0c9076;color: #ffffff;border: 1px solid #0c9076">支 付</button>

</div>


</body>
<script src="${base}/backstage/js/sweepOrder.js"></script>
<script>
    mui.init();
    layui.use(['form', 'layer', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload;
    })
    $(".primary").click(function() {
        if($("#uId").val()==""){
            layer.msg('该访问已过期,请重新扫码下单!')
            return
        }
        var goodId = this.value;
        $.ajax({
            type: "POST", //提交方式
            data: {"goodId":goodId,"tableNumberId":$("#tableNumberId").val(),"userId":$("#userId").val(),"uId":$("#uId").val()},
            url: "${base}/admin/QRCode/saveOrder",//路径
            async:false,
            success: function (data) {//返回数据根据结果进行相应的处理
                if(data.code==200){
                    layer.msg("添加成功")
                    sum();
                }else{
                    layer.msg("添加失败")
                }
            }
        });
    })

    $(function () {
sum();
    })

    //计算总和
    function sum() {
        $.ajax({
            type: "get", //提交方式
            data: {"uId":$("#uId").val()},
            url: "${base}/admin/QRCode/selectTemporaryByUId",//路径
            async:false,
            success: function (data) {//返回数据根据结果进行相应的处理
                if(data.code==200){
                    document.getElementById("totalpriceshow").innerText = data.data
                }else{
                    layer.msg("查询失败")
                }
            }
        });
    }

    function pay() {
        if($("#uId").val()==""){
            layer.msg('该访问已过期,请重新扫码下单!')
            return
        }
        if(document.getElementById("totalpriceshow").innerText==0){
            layer.msg("请选择菜品在进行下单!")
            return;
        }
        layer.msg("下单成功")
        document.getElementById("totalpriceshow").innerText = '0'
        $("#uId").val("")
        var frames=document.getElementById("ifame");//frameid即右栏iframe的id名
        frames.src="${base}/QRCode/commodity.html";//pageurl即要显示的目的页面
        var frames=window.parent.window.document.getElementById("ifame");
        frames.contentWindow.sweepOrder($("#userId").val());
    }

</script>
</html>